const path = require('path')
const webpack= require('webpack')
const htmlWebpackPlugin= require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
	entry: path.join(__dirname, './src/main.js'),
	output: {
		path: path.join(__dirname, './dist'),
		filename: 'bundle.js'
	},
	devServer:{
		//配置命令参数的第二种形式
		open:true,//自动打开浏览器，
		host:'192.168.0.107',
		port:8080,
//		端口
		contentBase:'src',//托管目录
		hot:true

	},
	plugins:[
	//配置插件的节点
	new webpack.HotModuleReplacementPlugin(),//热更新的模块对象
	new htmlWebpackPlugin({
		template:path.join(__dirname, './src/index.html'),//指定要放入内存当中的页面
		filename:'index.html'//指定页面的名字
	}),
	 new VueLoaderPlugin(),
	]
	,
	module:{
		//用于配置所有的第三方加载器
		rules:[
		//第三方配置规则
		{test:/\.css$/,use:['style-loader','css-loader']},
		{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
		{test:/\.(jpg|gif|png)$/,use:['url-loader?limit=75000&name=[hash:8]-[name].[ext]']},
		{test:/\.(ttf|eot|svg|woff|woff2)$/,use:['url-loader']},
        //		{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}//这是babel转化高级语法
		{test:/\.vue$/,use:'vue-loader' }
		]
	}
	,
	resolve:{
		alias:{//设置vue被导入的路径
			"vue$":"vue/dist/vue.js"
		}
	}
}